import React, { useState } from 'react' 

import { Input, View ,Image} from '@tarojs/components'

import searchImg from '../../assetsImg/images/search.svg'
import closeImg from '../../assetsImg/images/close.svg'

import './comment.scss'

function Search({handleChange,inputSetting,viewStyle,haveSearchIcon=true}){

  const [inputVal, setInputVal] = useState('') 

  const handleInput = (e)=>{
    setInputVal(e.detail.value)
    handleChange && changeell(handleChange)
  }

  const changeell = inputLImit((fun)=>{
    fun()
  },3000)

  const inputReset = ()=>{setInputVal('')}



  return (
    <View className='search' style={{...viewStyle}}>
      <Input className='input' style={{paddingLeft: haveSearchIcon?  '30px': '18px' }} value={inputVal}  onInput={e => handleInput(e)} {...inputSetting} />
      {
        haveSearchIcon && <Image src={searchImg} className='search-icon' />
      }
      {
        inputVal && <Image src={closeImg} className='close-icon' onClick={inputReset} />
      }
      
    </View>
  )
}

function inputLImit(fun,ms){
  let timeout 
  return function(){
    clearTimeout(timeout)
    timeout = setTimeout(()=>fun.apply(this,arguments),ms)
  }
}




export default Search

